<template>
  <div class="analysis-presentation py-10 px-5">
    <el-row>
      <el-col :span="3">
        <el-button color="#0052ac">
          <div class="mr-1" style="background-color: #fff; color: #0052ac; border-radius: 50%; width: 1rem; height: 1rem">
            <el-icon style="font-size: 0.7em"><Download /></el-icon>
          </div>
          生成报告
        </el-button>
      </el-col>

      <el-col :span="3" :push="18">
        <div style="font-size: 0.7em; height: 100%; display: flex; justify-content: flex-end; align-items: flex-end">{{ localDate }}</div>
      </el-col>
    </el-row>

    <el-row class="mt-10" :gutter="20">
      <el-col :span="6">
        <div class="chart land-information">
          <div class="chart-label">
            <p>土地概览</p>
          </div>
          <div class="chart-container">
            <div class="chart-title">
              <p>总面积<span class="highlight">10000000000</span>㎡</p>
            </div>
            <div class="chart-content">
              <el-row style="height: 100%">
                <el-col :span="12">
                  <div ref="landUseChart" style="height: 100%" />
                </el-col>
                <el-col :span="12">
                  <div ref="landStatusChart" style="height: 100%" />
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div class="chart park-information">
          <div class="chart-label">
            <p>园区概览</p>
          </div>
          <div class="chart-container">
            <div class="chart-title">
              <p>总建筑面积<span class="highlight">10000000000</span>㎡</p>
              <p>当年租金收入<span class="highlight">10000000000</span>万元</p>
            </div>
            <div ref="parkChart" class="chart-content"></div>
          </div>
        </div>

        <div class="chart flat-information">
          <div class="chart-label">
            <p>公寓出租率</p>
          </div>
          <div class="chart-container">
            <div ref="flatChart" class="chart-content" style="height: 100%"></div>
          </div>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="property-information"></div>

        <el-row :gutter="20" class="table-container">
          <el-col :span="12">
            <div class="chart house-information">
              <div class="chart-label">
                <p>房产（其他）出租率</p>
              </div>
              <div class="chart-container">
                <div ref="houseChart" class="chart-content" style="height: 100%"></div>
              </div>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="chart office-information">
              <div class="chart-label">
                <p>办公空间出租率</p>
              </div>
              <div class="chart-container">
                <div ref="officeChart" class="chart-content" style="height: 100%"></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div class="chart car-information">
          <div class="chart-label">
            <p>汽车运营</p>
          </div>
          <div class="chart-container">
            <div class="chart-title">
              <p>车辆数<span class="highlight">115</span>辆</p>
            </div>
            <div class="chart-content">
              <el-row style="height: 100%">
                <el-col :span="12">
                  <div ref="carRentChart" style="height: 100%" />
                </el-col>
                <el-col :span="12">
                  <div ref="carBrandChart" style="height: 100%" />
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div class="chart life-information">
          <div class="chart-label">
            <p>惠生活</p>
          </div>
          <div class="chart-container">
            <div class="chart-title">
              <p>当年销售额<span class="highlight">115</span>万元</p>
              <p>当月销售额<span class="highlight">115</span>万元</p>
            </div>
            <div ref="lifeChart" class="chart-content"></div>
          </div>
        </div>

        <div class="chart mixing-plant-information">
          <div class="chart-label">
            <p>混凝土搅拌站</p>
          </div>
          <div class="chart-container">
            <div class="chart-title">
              <p>当年累计供应量<span class="highlight">115</span>m³</p>
              <p>累计营业额<span class="highlight">115</span>万元</p>
            </div>
            <div ref="plantChart" class="chart-content"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="AnalysisPresentation">
import * as echarts from 'echarts';
import { computed, ref, onMounted } from 'vue';

const landUseChart = ref(null);
const landStatusChart = ref(null);
const parkChart = ref(null);
const flatChart = ref(null);
const houseChart = ref(null);
const officeChart = ref(null);
const carRentChart = ref(null);
const carBrandChart = ref(null);
const lifeChart = ref(null);
const plantChart = ref(null);

const localDate = computed(() => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
  const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
  return year + '年' + month + '月' + day + '日';
});

const landUseChartInit = () => {
  const landUseChartInstance = echarts.init(landUseChart.value, 'macarons');

  landUseChartInstance.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top: 40,
      right: 60
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '80%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      }
    ]
  });

  window.addEventListener('resize', () => {
    landUseChartInstance.resize();
  });
};

const landStatusChartInit = () => {
  const landStatusChartInstance = echarts.init(landStatusChart.value, 'macarons');

  landStatusChartInstance.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top: 40,
      right: 60
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '80%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      }
    ]
  });

  window.addEventListener('resize', () => {
    landStatusChartInstance.resize();
  });
};

const parkCharttInit = () => {
  const parkChartInstance = echarts.init(parkChart.value, 'macarons');

  parkChartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        interval: 50,
        axisLabel: {
          formatter: '{value} 辆'
        }
      },
      {
        type: 'value',
        name: '出租率',
        interval: 5,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: '数量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 辆';
          }
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
      },
      {
        name: '出租率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' %';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  });

  window.addEventListener('resize', () => {
    parkChartInstance.resize();
  });
};

const flatCharttInit = () => {
  const flatChartInstance = echarts.init(flatChart.value, 'macarons');

  flatChartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        interval: 50,
        axisLabel: {
          formatter: '{value} 辆'
        }
      },
      {
        type: 'value',
        name: '出租率',
        interval: 5,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: '数量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 辆';
          }
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
      },
      {
        name: '出租率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' %';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  });

  window.addEventListener('resize', () => {
    flatChartInstance.resize();
  });
};

const houseCharttInit = () => {
  const houseChartInstance = echarts.init(houseChart.value, 'macarons');

  houseChartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        interval: 50,
        axisLabel: {
          formatter: '{value} 辆'
        }
      },
      {
        type: 'value',
        name: '出租率',
        interval: 5,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: '数量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 辆';
          }
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
      },
      {
        name: '出租率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' %';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  });

  window.addEventListener('resize', () => {
    houseChartInstance.resize();
  });
};

const officeCharttInit = () => {
  const officeChartInstance = echarts.init(officeChart.value, 'macarons');

  officeChartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        interval: 50,
        axisLabel: {
          formatter: '{value} 辆'
        }
      },
      {
        type: 'value',
        name: '出租率',
        interval: 5,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: '数量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 辆';
          }
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
      },
      {
        name: '出租率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' %';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  });

  window.addEventListener('resize', () => {
    officeChartInstance.resize();
  });
};

const carRentChartInit = () => {
  const carRentChartInstance = echarts.init(carRentChart.value, 'macarons');

  carRentChartInstance.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top: 40,
      right: 60
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '80%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      }
    ]
  });

  window.addEventListener('resize', () => {
    carRentChartInstance.resize();
  });
};

const carBrandChartInit = () => {
  const carBrandChartInstance = echarts.init(carBrandChart.value, 'macarons');

  carBrandChartInstance.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top: 40,
      right: 60
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '80%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      }
    ]
  });

  window.addEventListener('resize', () => {
    carBrandChartInstance.resize();
  });
};

const lifeChartInit = () => {
  const lifeChartInstance = echarts.init(lifeChart.value, 'macarons');

  lifeChartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
    },
    series: [
      {
        name: '2011',
        type: 'bar',
        data: [18203, 23489, 29034, 104970, 131744, 630230]
      },
      {
        name: '2012',
        type: 'bar',
        data: [19325, 23438, 31000, 121594, 134141, 681807]
      }
    ]
  });

  window.addEventListener('resize', () => {
    lifeChartInstance.resize();
  });
};

const plantCharttInit = () => {
  const plantChartInstance = echarts.init(plantChart.value, 'macarons');

  plantChartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        interval: 50,
        axisLabel: {
          formatter: '{value} 辆'
        }
      },
      {
        type: 'value',
        name: '出租率',
        interval: 5,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: '数量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 辆';
          }
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
      },
      {
        name: '出租率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' %';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  });

  window.addEventListener('resize', () => {
    plantChartInstance.resize();
  });
};

const chartInit = () => {
  landUseChartInit();
  landStatusChartInit();
  parkCharttInit();
  flatCharttInit();
  houseCharttInit();
  officeCharttInit();
  carRentChartInit();
  carBrandChartInit();
  lifeChartInit();
  plantCharttInit();
};

onMounted(() => {
  chartInit();
});
</script>

<style lang="scss">
p {
  margin: 0;
  padding: 0;
}

.highlight {
  color: #ffab3e;
}

.analysis-presentation {
  background-image: url('@/assets/images/u6862.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .chart {
    width: 100%;
    height: 35vh;
    background-image: url('@/assets/images/u6866.png');
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &:not(:last-child) {
      margin-bottom: 3vh;
    }

    .chart-label {
      position: relative;
      height: 10%;
      p {
        position: absolute;
        left: 5%;
        bottom: 5%;
        font-size: 1vw;
      }
    }

    .chart-container {
      padding: 1vw;
      height: calc(100% - 10%);
      .chart-title {
        height: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1vw;
      }
      .chart-content {
        height: 70%;
      }
    }
  }
}
</style>
